<template>
  <div>
    <section>
      <!-- <img class="full-width" src="/static/bg06.png" alt=""> -->
    </section>
    <section class="relative supplier-system no-padding">
      <div class="mini-n-width system">
      <p class="header"><span class="minifont">会员入会申请表</span></p>
      <p class="content mt20">上海市安装行业协会会员申请表 </p>
      <p class="content">本单位自愿申请加入上海市安装行业协会，承认本会章程，参加本会活动，在享受会员权利的同时， 愿意履行会员义务。</p>
      <p class="content right mt60">上海市安装行业协会秘书处</p>
      <p class="content right mr35 mt10">二O二O年一月</p>
      <p class="mark-tip" v-if="formData.remark">{{formData.remark}}</p>
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="单位名称" class="form-item mt60">
          <a-input v-decorator="['dwmch',{ initialValue: formData.dwmch || '', rules: [{ required: true, message: '请填写单位名称!' }]}]" placeholder="单位名称" autocomplete="off" />
        </a-form-item>
        <a-form-item label="营业执照号" class="form-item">
          <a-input v-decorator="['yyzhizhao',{ initialValue: formData.yyzhizhao || '', rules: [{ required: true, message: '请填写营业执照号!' }]}]" placeholder="营业执照号" autocomplete="off" />
        </a-form-item>
        <a-form-item label="注册地址" class="form-item">
          <a-input v-decorator="['regAddress',{ initialValue: formData.regAddress || '', rules: [{ required: true, message: '请填写注册地址!' }]}]" placeholder="注册地址" autocomplete="off" />
        </a-form-item>
        <a-form-item label="成立日期" class="form-item">
          <a-date-picker  v-decorator="['cliriqi',{ initialValue: formData.cliriqi || '', rules: [{ required: true, message: '请填写成立日期!' }]}]"  placeholder="成立日期"  style="width: 100%" />
        </a-form-item>
        <a-form-item label="法定代表人" class="form-item">
          <a-input v-decorator="['fdren',{ initialValue: formData.fdren || '', rules: [{ required: true, message: '请填写法定代表人!' }]}]" placeholder="法定代表人" autocomplete="off" />
        </a-form-item>
        <a-form-item label="注册资本" class="form-item">
          <a-input v-decorator="['zceziben',{ initialValue: formData.zceziben || '', rules: [{ required: true, message: '请填写注册资本!' }]}]" placeholder="注册资本" autocomplete="off" />
        </a-form-item>
        <a-form-item label="董事长" class="form-item">
          <a-input v-decorator="['dongshizhang',{ initialValue: formData.dongshizhang || '', rules: [{ required: true, message: '请填写董事长!' }]}]" placeholder="董事长" autocomplete="off" />
        </a-form-item>
        <a-form-item label="通讯办公地址" class="form-item">
          <a-input v-decorator="['txbgsdizhi',{ initialValue: formData.txbgsdizhi || '', rules: [{ required: true, message: '请填写通讯办公地址!' }]}]" placeholder="通讯办公地址" autocomplete="off" />
        </a-form-item>
        <a-form-item label="企业产权形式" class="form-item">
          <a-select v-decorator="['qychqxshi',{ initialValue: formData.qychqxshi || '', rules: [{ required: true, message: '请填写企业产权形式!' }]}]" placeholder="企业产权形式" >
            <a-select-option value="国有企业">国有企业</a-select-option>
            <a-select-option value="有限责任公司">有限责任公司</a-select-option>
            <a-select-option value="股份有限公司">股份有限公司</a-select-option>
            <a-select-option value="股份合作制企业">股份合作制企业</a-select-option>
            <a-select-option value="私营企业">私营企业</a-select-option>
            <a-select-option value="中外合资企业">中外合资企业</a-select-option>
            <a-select-option value="其他">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="邮政编码" class="form-item">
          <a-input v-decorator="['yzbianma',{ initialValue: formData.yzbianma || '', rules: [{ required: true, message: '请填写邮政编码!' }]}]" placeholder="邮政编码" autocomplete="off" />
        </a-form-item>
        <a-row>
          <a-col span="10">
            <a-form-item
              :label-col="layout.labelCol"
              :wrapper-col="layout.wrapperCol"
              label="电话"
            >
              <a-input v-decorator="['telnum',{ initialValue: formData.telnum || '' }]" />
            </a-form-item>
          </a-col>
          <a-col span="10" offset="2">
          <a-form-item
              :label-col="layout.labelCol"
              :wrapper-col="layout.wrapperCol"
              label="传真"
            >
            <a-input v-decorator="['fax',{ initialValue: formData.fax || '' }]" placeholder="传真" autocomplete="off" />
          </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="资质主项及等级" class="form-item">
          <a-input v-decorator="['zizhizxdj',{ initialValue: formData.zizhizxdj || '' }]" placeholder="资质主项及等级" autocomplete="off" />
        </a-form-item>
        <a-form-item label="资质增项及等级" class="form-item">
          <a-input v-decorator="['zzzxjidj',{ initialValue: formData.zzzxjidj || '' }]" placeholder="资质增项及等级" autocomplete="off" />
        </a-form-item>
        <p class="content mt20">上年末从业人员总数 </p>
        <a-row>
          <a-col span="10">
            <a-form-item
              :label-col="layout.labelCol"
              :wrapper-col="layout.wrapperCol"
              label="管理人员"
            >
              <a-input v-decorator="['glirenyuan',{ initialValue: formData.glirenyuan || '' }]" />
            </a-form-item>
          </a-col>
          <a-col span="10" offset="2">
            <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="生产工人" >
              <a-input v-decorator="['schgongren',{ initialValue: formData.schgongren || '' }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="10">
            <a-form-item
              :label-col="layout.labelCol"
              :wrapper-col="layout.wrapperCol"
              label="一级建造师"
            >
              <a-input v-decorator="['yijijzs',{ initialValue: formData.yijijzs || '' }]" />
            </a-form-item>
          </a-col>
          <a-col span="10" offset="2">
            <a-form-item :label-col="layout.labelCol" :wrapper-col="layout.wrapperCol" label="二级建造师" >
              <a-input v-decorator="['erjijzs',{ initialValue: formData.erjijzs || '' }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="上年末从业人员总数" class="form-item">
          <a-input v-decorator="['sbcytotal',{ initialValue: formData.sbcytotal || '' }]" placeholder="上年末从业人员总数" autocomplete="off" />
        </a-form-item>
        <a-form-item label="上年度完成产值" class="form-item">
          <a-input v-decorator="['sbnczhi',{ initialValue: formData.sbnczhi || '' }]" placeholder="上年度完成产值" autocomplete="off" />
        </a-form-item>
        <a-form-item label="上年度实现利润" class="form-item">
          <a-input v-decorator="['sbnlirun',{ initialValue: formData.sbnlirun || '' }]" placeholder="上年度实现利润" autocomplete="off" />
        </a-form-item>
        <a-form-item label="总经理" class="form-item">
          <a-input v-decorator="['zongjingli',{ initialValue: formData.zongjingli || '' }]" placeholder="总经理" autocomplete="off" />
        </a-form-item>
        <a-form-item label="副经理" class="form-item">
          <a-input v-decorator="['vicejingli',{ initialValue: formData.vicejingli || '' }]" placeholder="副经理" autocomplete="off" />
        </a-form-item>
        <a-form-item label="总工程师" class="form-item">
          <a-input v-decorator="['zonggcshi',{ initialValue: formData.zonggcshi || '' }]" placeholder="总工程师" autocomplete="off" />
        </a-form-item>
        <a-form-item label="总经济师" class="form-item">
          <a-input v-decorator="['zongjjshi',{ initialValue: formData.zongjjshi || '' }]" placeholder="总经济师" autocomplete="off" />
        </a-form-item>
        <a-form-item label="总会计师" class="form-item">
          <a-input v-decorator="['zongkjishi',{ initialValue: formData.zongkjishi || '' }]" placeholder="总会计师" autocomplete="off" />
        </a-form-item>
        <a-form-item label="科技部负责人" class="form-item">
          <a-input v-decorator="['kejibufuzren',{ initialValue: formData.kejibufuzren || '' }]" placeholder="科技部负责人" autocomplete="off" />
        </a-form-item>
        <a-form-item label="安质部负责人" class="form-item">
          <a-input v-decorator="['anzhibufuzren',{ initialValue: formData.anzhibufuzren || '' }]" placeholder="安质部负责人" autocomplete="off" />
        </a-form-item>
        <a-form-item label="办公室主任" class="form-item">
          <a-input v-decorator="['bgszren',{ initialValue: formData.bgszren || '' }]" placeholder="办公室主任" autocomplete="off" />
        </a-form-item>
        <a-form-item label="协会工作联络员" class="form-item">
          <a-input v-decorator="['xhuilianluoren',{ initialValue: formData.xhuilianluoren || '' }]" placeholder="协会工作联络员" autocomplete="off" />
        </a-form-item>
        <a-form-item label="手机号" class="form-item">
          <a-input v-decorator="['phone',{ initialValue: formData.phone || '' }]" placeholder="手机号" autocomplete="off" />
        </a-form-item>
        <a-form-item label="联系地址" class="form-item">
          <a-input v-decorator="['lxaddress',{ initialValue: formData.lxaddress || '' }]" placeholder="联系地址" autocomplete="off" />
        </a-form-item>
        <a-form-item label="电子邮箱" class="form-item">
          <a-input v-decorator="['email',{ initialValue: formData.email || '' }]" placeholder="电子邮箱" autocomplete="off" />
        </a-form-item>
        <a-form-item label="秘书处审核意见" class="form-item">
          <a-input v-decorator="['approveRemark',{ initialValue: formData.approveRemark || '' }]" placeholder="秘书处审核意见" autocomplete="off" />
        </a-form-item>
        <a-form-item label="备注" class="form-item">
          <a-input v-decorator="['remark',{ initialValue: formData.remark || '' }]" placeholder="备注" autocomplete="off" />
        </a-form-item>
        <a-form-item label="企业logo" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.logoqye}}<a-icon class="tip" type="close" @click="deleteDoc('logoqye')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".png,.jpg,.jpeg" :headers="headers" :showUploadList="false" @change="handleChange($event, 'logoqye')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="营业执照(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.fileYyzzhao}}<a-icon class="tip" type="close" @click="deleteDoc('fileYyzzhao')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'fileYyzzhao')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="资质证书(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.fileZzzhenshu}}<a-icon class="tip" type="close" @click="deleteDoc('fileZzzhenshu')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'fileZzzhenshu')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label=" 承诺书(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.fileChennuoshu}}<a-icon class="tip" type="close" @click="deleteDoc('fileChennuoshu')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'fileChennuoshu')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label=" 企业简介(支持图片、PDF、office文件且文件大小不超过5M)" class="form-item" >
          <a-row :gutter="24">
            <a-col :span="20">
                <div class="from-item-input">
                    <span>{{file.fileQyjianjie}}<a-icon class="tip" type="close" @click="deleteDoc('fileQyjianjie')" /></span>
                </div>
            </a-col>
            <a-col :span="4">
              <a-upload name="fileName" :action="uploadUrl" :before-upload="beforeUpload" accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange($event, 'fileQyjianjie')">
                <a-button  type="primary" class="ss-btn">上传附件</a-button>
              </a-upload>
            </a-col>
          </a-row>
        </a-form-item>
        <div class="supplier-footer">
          <a-button @click="goBack" class="ss-btn">
            返回
          </a-button>
          <!-- <a-button class="ss-btn"> -->
          <!-- <a-button html-type="submit" class="s-btn"> -->
            <!-- 保存
          </a-button> -->
          <a-button @click="resetForm" class="ss-btn">
            重填
          </a-button>
          <a-button html-type="submit" type="primary"  class="ss-btn">
            提交
          </a-button>
        </div>
    </a-form>
    </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'association',
  data () {
    return {
      list: [],
      headers: {
        authorization: 'authorization-text'
      },
      formData: '',
      uploadUrl: `${process.env.VUE_APP_URL}/main/upload`,
      form: this.$form.createForm(this),
      file: {
        logoqye: '',
        fileYyzzhao: '',
        fileZzzhenshu: '',
        fileChennuoshu: '',
        fileQyjianjie: ''
      },
      layout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      }
    }
  },
  components: {
  },
  created () {
    this.getCurrentMemberForm()
  },
  computed: {
  },
  mounted () {
    window.scrollTo(0, 0)
    document.body.scrollTop = document.documentElement.scrollTop = 0
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    goNext () {
      this.$router.push({ path: '/vip/supplier/final' })
    },
    deleteDoc (key) {
      this.file[key] = ''
    },
    beforeUpload (file) {
      if (file.size > 5242880) {
        this.$message.warning("文件大小不能超过5M")
        return false
      }
    },
    getCurrentMemberForm () {
      this.$http.getCurrentMemberForm().then(res => {
        if (res.data) {
          this.formData = res.data
          this.file.fileYyzzhao = res.data.fileYyzzhao
          this.file.fileZzzhenshu = res.data.fileZzzhenshu
          this.file.fileChennuoshu = res.data.fileChennuoshu
          this.file.fileQyjianjie = res.data.fileQyjianjie
          this.file.logoqye = res.data.logoqye
        }
      })
    },
    handleSubmit (e) {
      let _this = this
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          _this.memberStepForm(values)
        }
      })
    },
    handleChange (info, key) {
      if (info.file.status === "done") {
        this.file[key] = info.file.response.fileName
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    memberStepForm (values) {
      if (!this.file.fileYyzzhao) {
        this.$message.warning(`请上传营业执照`)
        return false
      }
      if (!this.file.fileZzzhenshu) {
        this.$message.warning(`请上传资质证书`)
        return false
      }
      if (!this.file.fileChennuoshu) {
        this.$message.warning(`请上传承诺书`)
        return false
      }
      Object.assign(values, this.file)
      let _this = this
      this.showDialog({
        title: '提示',
        msg: '确认提交吗',
        lBtnText: '取消',
        rBtnText: '确认',
        confCallBack () {
          _this.$http.memberStepForm(values).then(res => {
            _this.$router.push({ name: 'Vfinal', params: { msg: res.data } })
          })
        }
      })
    },
    resetForm () {
      this.form.resetFields()
    }
  }
}
</script>
<style lang="scss">
</style>
